﻿@{
    ViewData["Title"] = base.L("设置角色权限");
    Layout = null;
}
<input type="hidden" id="standardRoleGUID" name="standardRoleGUID">

<div class="topjui-row">
    <div class="topjui-col-sm6">
        <label class="topjui-form-label" style="width:40px"> @L("系统")</label>
        <div class="topjui-input-block" style="margin-left:50px">
            <input id="myFormApplicationGUID" type="text" name="applicationGUID" data-toggle="topjui-combobox"
                   data-options="required:false,
                                editable: true,
                                valueField:'id',
                                textField:'text',
                                loader: $.loader.comboxLoader,
                                mode: 'remote',
                                queryParams:
                                {
                                    isShowAll:1,
                                    viewName:'View_FW_application',
                                    comBoxValueName:'applicationName',
                                    initQuery:$('#myFormapplicationName').val()
                                }">
        </div>
    </div>
    <div class="topjui-col-sm6">
        <a style="margin-left:5px" href="javascript:void(0)"
           data-toggle="topjui-menubutton"
           data-options="
                btnCls:'topjui-btn-query',
                iconCls:'fa fa-search',
                onClick:searchQuery">
            @L("查询")
        </a>
    </div>
</div>

<div class="layui-tab" id="SetRightIndexTabs" style="min-height:400px">
    <ul class="layui-tab-title">
        <li :class="{'layui-this':index==0}" v-for="(moduleDto,index) in moduleDtos">
            {{moduleDto.moduleName}}
            <div :id="moduleDto.moduleGUID" data-toggle="topjui-checkbox" v-on:mousedown="moduleChk(moduleDto.moduleGUID)" style="display:inline-block;position:relative;top:10px">
                <input type="checkbox" name="moduleChk" :value="moduleDto.moduleGUID" />
            </div>
        </li>
    </ul>

    <div class="layui-tab-content">
        <div :class="{'layui-tab-item':true,'layui-show':index==0}" v-for="(moduleDto,index) in moduleDtos">

            <div v-for="(parentFunctionDto,index) in getFilterGroupFunctionDtos(moduleDto.moduleGUID)" style="border:1px solid rgba(0,132,249,1);margin-bottom:10px">
                <fieldset>
                    <legend>{{parentFunctionDto.parentFunctionName}}</legend>
                </fieldset>
                <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;" v-for="(functionDto,index) in getFunctionDtos(parentFunctionDto.parentGUID,moduleDto.functionDtos)">
                    <legend>
                        <span>
                            {{functionDto.functionName}}
                            <div data-toggle="topjui-checkbox" v-on:mousedown="check(functionDto.functionGUID)" style="display:inline" :id="functionDto.functionGUID+'Group'">
                                <input type="checkbox" name="test" :value="functionDto.functionGUID" label="全选/反选" checked="checked" v-if="functionDto.isAllChecked" />
                                <input type="checkbox" name="test" :value="functionDto.functionGUID" label="全选/反选" v-if="!functionDto.isAllChecked" />
                            </div>
                        </span>

                    </legend>
                    <div data-toggle="topjui-checkbox" :id="functionDto.functionGUID">
                        <input v-for="(actionDto,index) in functionDto.actionDtos" type="checkbox" name="rights" :value="actionDto.actionGUID" :label="actionDto.actionName" checked="checked" v-if="actionDto.isChecked">
                        <input v-for="(actionDto,index) in functionDto.actionDtos" type="checkbox" name="rights" :value="actionDto.actionGUID" :label="actionDto.actionName" v-if="!actionDto.isChecked">
                    </div>
                </fieldset>
            </div>


        </div>
    </div>

</div>

<script>
    function searchQuery() {
        var appGUID = $("#myFormApplicationGUID").iCombobox('getValue');
        var data = vmDivApp.$data.pageQuery;
        data.applicationGUID = appGUID;
        vmDivApp.$options.methods.getPageData.bind(vmDivApp)(data);
    }

    var vmDivApp = null;

    $(function () {
        $("#myFormApplicationGUID").val($.dm.getAppInfo().id);
           vmDivApp = new Vue({
            el: '#SetRightIndexTabs',
            data: {
                moduleDtos: [],
                groupFunctionDtos:[],
                pageQuery: {
                    roleGUID: '@(base.Context.Request.Query["standardRoleGUID"])',
                    applicationGUID: $.dm.getAppInfo().id,
                    isBuSet:'@(string.IsNullOrEmpty(base.Context.Request.Query["isBuSet"]) ? "0" : base.Context.Request.Query["isBuSet"].ToString())'
                }
            },
            methods: {
                check: function (functionGUID) {
                    var spanHeadGroup = $("#{0}Group".format(functionGUID));
                    var spanHeadGroupValue = spanHeadGroup.iCheckbox('getValue');
                    var checkGroup = $("#{0}".format(functionGUID));
                    if ($.isEmptyObject(spanHeadGroupValue)) {
                        checkGroup.iCheckbox('checkAll');
                    } else {
                        checkGroup.iCheckbox('unCheckAll');
                    }
                },
                getPageData: function (data) {
                    var self = this;
                    self.moduleDtos = [];
                    var options = {
                        url: '/api/services/app/FWStandardRole2Action/GetRoleRights',
                        data: data,
                        maskJqSelect:'#SetRightIndexTabs'
                    };
                    var success = function (result) {
                        self.moduleDtos = result.moduleDtos;
                        // 配置是分组是否全部选中
                        _(self.moduleDtos).forEach(function (moduleItem) {
                            _(moduleItem.functionDtos).forEach(function (functionItem) {
                                var isAllChecked = _(functionItem.actionDtos).every('isChecked');
                                functionItem.isAllChecked = isAllChecked;
                                var groupFunctionItem = {
                                    parentGUID: functionItem.parentGUID,
                                    parentFunctionName: functionItem.parentFunctionName,
                                    moduleGUID: moduleItem.moduleGUID
                                }
                                self.groupFunctionDtos.push(groupFunctionItem);
                            })
                        })

                        self.groupFunctionDtos= _(self.groupFunctionDtos).uniqBy('parentGUID').value();

                        self.$nextTick(function () {
                            initLayIM();
                            $.parser.parse('#SetRightIndexTabs');
                        });
                    }
                    abp.ajax(options).done(success);
                },
                chkBox: function (actionDto) {
                    setChkGUID();
                },
                getFilterGroupFunctionDtos(moduleId) {
                    return _(this.groupFunctionDtos).filter({ 'moduleGUID': moduleId }).value();
                },
                getFunctionDtos(parentGUID, functionDtos) {
                    return _(functionDtos).filter(function (item, index) {
                        return item.parentGUID == parentGUID && item.actionDtos.length > 0;
                    }).value();
                },
                moduleChk: function (moduleGUID) {
                    // 找到这个模块下所有的都进行勾选
                    var module = _(this.moduleDtos).find(['moduleGUID', moduleGUID]);
                    var functionIDs = _(module.functionDtos).map('functionGUID').value();
                    var self = this;

                    var elModuleValue = $("#{0}".format(moduleGUID));

                    var ischeckAll = true;
                    var value = elModuleValue.iCheckbox('getValue');
                    if (!$.isEmptyObject(value)) {
                        ischeckAll = false;
                        elModuleValue.iCheckbox('checkAll');
                    } else {
                        elModuleValue.iCheckbox('unCheckAll', moduleGUID);
                    }

                    -(functionIDs).forEach(function (functionGUID) {
                        var checkGroup = $("#{0}".format(functionGUID));
                        var spanHeadGroup = $("#{0}Group".format(functionGUID));
                        if (ischeckAll) {
                            checkGroup.iCheckbox('checkAll');
                            spanHeadGroup.iCheckbox('checkAll')
                        } else {
                            checkGroup.iCheckbox('unCheckAll');
                           spanHeadGroup.iCheckbox('unCheckAll')
                        }
                    })


                    //_(actions).forEach(function (item) {
                    //    self.$set(item, 'isChecked', true);
                    //})
                }
            },
           created: function () {
               var data = this.pageQuery;
               this.getPageData(data);
            },
            computed: {

            },
            filters: {
            },
            watch: {
                //"currentStore.storeId": {
                //    handler: function (val, oldval) {
                //        if (val) {
                //            vmDivItem1.$options.methods.getMonthSummaryData.bind(vmDivItem1)(1, val);
                //            vmDivItem3.$options.methods.getTodyBookData.bind(vmDivItem3)(1, val);
                //        }
                //    }
                //}
            }
        });

    })

    function setChkGUID() {
        var moduleDtos = this.moduleDtos;
        var selectChkGUIDs = [];
        // 找出所有选中的dto
        _.forEach(moduleDtos, function (moduleItem, index, lst) {
            _.forEach(moduleItem.functionDtos, function (item) {
                if (item.isChecked) {
                    selectChkGUIDs.push(item.id)
                }
            });
        });
        $("#selectChkGUIDs").val(selectChkGUIDs.join(","));
    }

    function initLayIM() {
        layui.use(['element'], function () {
        });
    }
</script>
